<template>
  <view>
    <view
        class="flex justify-center align-center relative bg-fff sticky z-3"
        id="container"
        :style="{top:`${top}px`}"
    >
      <!--骨架屏-->
      <view v-if="loading" class="flex align-center justify-center pb-30 pt-50">
        <view class="h-60 w-200 br-5 bg-f4f7f4"> </view>
        <view class="w-30 h-5 br-5 m-lr-10"></view>
        <view class="h-60 w-200 br-5 bg-f4f7f4"></view>
      </view>
      <date-picker
          v-else
          @changeTime="changeTime">
      </date-picker>
    </view>
    <!--骨架屏-->
    <list-skeleton v-if="loading"></list-skeleton>
    <view v-else-if="workList.length && !loading">
      <view
          class="m-lr-20 mb-30 pl-20 h-300 flex align-center justify-between bg-E9F8FF br-10"
          v-for="item in workList"
          :key="item.workOrderId"
          @tap="clickItem(item)"
      >
        <view class="flex flex-column oh">
          <text class="fz-40 font-bold lh-56 mt-12 text-ellipsis">{{ item.workOrderName || '-'}}</text>
          <text class="fz-32 lh-45 mt-20 text-ellipsis">所属科室：{{item.departmentName || '-'}}</text>
          <text class="fz-32 lh-45 mt-20 text-ellipsis">巡检人：{{item.staffName || '-'}}</text>
          <view class="flex mt-10">
            <text class="fz-32 lh-40">
              起止时间：
            </text>
            <view class="flex flex-column fz-32 lh-40">
              <text>{{ showStartTime(item.startTime)}}</text>
              <text>{{ showStartTime(item.endTime)}}</text>
            </view>
          </view>
        </view>
        <view class="relative mr-60">
          <CustomCircleProgress
              :border-width="8"
              :size="128"
              :percent="100"
              :active-color="'#FF6262'"
          >
            <view class="h-full w-full lh-center color-FF6262">
              <text class="fz-30">有异常</text>
            </view>
          </CustomCircleProgress>
        </view>
      </view>
    </view>

    <empty-icon v-else></empty-icon>
  </view>
</template>

<script>
import ListSkeleton from "../../components/ListSkeleton";
import CustomCircleProgress from '../../components/CustomCircleProgress'
import getNavBarHeight from "@/mixins/getNavBarHeight";
import DatePicker from "@/components/DatePicker/DatePicker";
import EmptyIcon from "@/components/EmptyIcon/EmptyIcon";
import dayjs from '@/libs/dayjs.min.js'
import {listWorkOrderAbnormal} from "@/api/inspection/abnormal";
export default {
  name: "workAbnormal",
  components: {EmptyIcon, DatePicker, CustomCircleProgress, ListSkeleton},
  mixins:[getNavBarHeight],
  data() {
    return {
      hasNext: false,
      pageNum: 1,
      pageSize: 10,
      workList: [],
      startTime: '',
      endTime: '',
      loading: true,
    }
  },
  created(){
    this.doQuery().then(res => {
      this.hasNext = res.hasNext
      this.workList = res.rows
    }).finally(() => {
      this.loading = false
    })
  },
  methods:{
    show(){
      this.pageNum = 1
      this.doQuery().then(res => {
        this.hasNext = res.hasNext
        this.workList = res.rows
      }).finally(() => {
        this.loading = false
      })
    },
    hide(){
      this.loading = true
    },
    clickItem(item) {
      this.$tab.navigateTo('/pages/work/work-order-detail?workOrderId='+item.workOrderId)
    },
    reachBottom(){
      if(this.hasNext){
        this.pageNum ++
        this.doQuery().then(res => {
          this.hasNext = res.hasNext
          this.workList= [...this.workList,...res.rows]
          this.loading = false
        })
      }
    },
    changeTime(e){
      this.pageNum = 1
      this.startTime = e.startTime ? dayjs(e.startTime).format('YYYY-MM-DD') : '';
      this.endTime = e.endTime ? dayjs(e.endTime).format('YYYY-MM-DD') : '';
      this.doQuery().then(res => {
        this.hasNext = res.hasNext
        this.workList= res.rows
      })
    },
    doQuery(){
      let params = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        inspectionStartDate: this.startTime,
        inspectionEndDate: this.endTime
      }
      return listWorkOrderAbnormal(params).then(res => {
        return Promise.resolve(res)
      }).catch(() => {
        this.loading = false
      })
    },
    showStartTime(time){
      return time ? dayjs(time).format('YYYY-MM-DD HH:mm') : '-'
    }
  }
}
</script>

<style scoped>

</style>
